<template>
  <div class="slider-wrapper">
    <div id="wrapper">
        <div
          id="sliderContainer"
          :style="{ width: width + 'px', height: height + 'px' }"
        >
          <svg id="gradient" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect :width="width" :height="height" fill="url(#paint0_linear)" />
            <clipPath id="handleClip">
              <polygon :points="handlePath" />
            </clipPath>
            <defs>
              <linearGradient
                id="paint0_linear"
                x1="0"
                y1="0"
                x2="288"
                y2="0"
                gradientUnits="userSpaceOnUse"
              >
                <stop stop-color="#42ffff" />
                <stop offset="1" stop-color="#142aec" />
              </linearGradient>
            </defs>
          </svg>
          <input
            id="bar"
            type="range"
            :min="min"
            :max="max"
            step="1"
            v-model="value"
            @input="updateValueBoxPosition($event)"
          />
          <div id="valueBox" ref="valueBox" :style="{ left: boxLeft + 'px' }">
            <div id="valueWrapper">
              <div id="value">{{ value }}<span>%</span></div>
            </div>
            <svg
              id="valueBoxArrow"
              width="16"
              height="7"
              viewBox="0 0 16 7"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              version="1.1"
            >
              <path
                d="M9 6.5C8.34625 7.05368 7.62474 7.08203 7 6.5L0 0H16L9 6.5Z"
                fill="white"
              />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M16 0L9 6.64547C8.4453 7.10631 7.53008 7.1299 7 6.64547L0 0H4L8 3.79741L12 0H16Z"
                fill="url(#paint1_linear)"
              />
              <defs>
                <linearGradient
                  id="paint1_linear"
                  x1="1.5"
                  y1="1.42403"
                  x2="15.9832"
                  y2="-0.154164"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#42ffff" />
                  <stop offset="1" stop-color="#142aec" />
                </linearGradient>
              </defs>
            </svg>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: "mySlider",
  components: {},
  props: [],
  data() {
    return {
      width: 300,
      height: 9,
      min: 0,
      max: 100,
      value: 0,
      handleWidth: 16,
      handleHeight: 9,
      boxLeft: 0,
    };
  },
  computed: {
    percent() {
      const range = this.max - this.min;
      const absValue = this.value - this.min;

      return absValue / range;
    },
    handlePath() {
      const leftX = this.percent * (this.width - this.handleWidth);
      const centerX = leftX + this.handleWidth / 2;
      const rightX = leftX + this.handleWidth;

      const left = leftX + " " + this.handleHeight;
      const top = centerX + " " + 0;
      const right = rightX + " " + this.handleHeight;
        console.log(left,top,right,'123')
      return left + "," + top + "," + right;
    },
  },
  created() {},
  mounted() {
    this.updateValueBoxPosition();
  },
  methods: {
    calcBoxLeft() {
      const boxRect = this.$refs.valueBox.getBoundingClientRect();
      console.log((
        this.percent * (this.width - this.handleWidth) +
        this.handleWidth / 2 -
        boxRect.width / 2
      ),'123')

      return (
        this.percent * (this.width - this.handleWidth) +
        this.handleWidth / 2 -
        boxRect.width / 2
      );
    },
    updateValueBoxPosition() {
      this.$nextTick(() => {
        this.boxLeft = this.calcBoxLeft();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$cl1:#42ffff;
$cl2:#142aec;
.slider-wrapper{
  position: relative;
  height: 45px;
}
#wrapper {
  width: 100%;
  margin: 0 auto;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 34px;
  padding-bottom: 5px;
}

#sliderContainer {
  position: relative;
}

#gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  clip-path: url(#handleClip);
}

#handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#valueBox {
  position: absolute;
  top: -34px;
  min-width: 34px;
  padding: 3px;
  background: linear-gradient(330deg, $cl1 22.58%, $cl2 77.88%);
  border-radius: 4px;
}

#valueBoxArrow {
  position: absolute;
  bottom: -4px;
  left: calc(50% - 8px);
  -webkit-transform: scale(1);
  transform: scale(1);
}

#valueWrapper {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  background-color: white;
}

#value {
  font-family: "Lato", sans-serif;
  font-weight: bold;
  font-size: 14px;
  background: linear-gradient(330deg, $cl1 22.58%, $cl2 77.88%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#value > span {
  vertical-align: top;
  font-size: 16px;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  background: transparent;
  outline: none;
  margin: 0;
  z-index: 1;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-moz-focus-outer {
  border: 0;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 32px;
  background: transparent;
  cursor: pointer;
  margin-top: -16px;
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 32px;
  background: transparent;
  cursor: pointer;
  border: none;
  margin-top: -16px;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: linear-gradient(90deg, $cl1 0%, $cl2 100%);
  border-radius: 2px;
}

input[type="range"]:focus::-webkit-slider-runnable-track,
input[type="range"]:active::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, $cl1 0%, $cl2 100%);
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: linear-gradient(90deg, $cl1 0%, $cl2 100%);
  border-radius: 2px;
}
</style>
